<template>
  <el-card>
    <div slot="header">{{project.name}} 在全平台的数据</div>
    <p>
      当前显示的分类：
      <el-radio-group v-model="allPlatform.selected">
        <el-radio-button v-for="(name ,index) in allPlatform.keys" :key="index" :value="index"
                         :label="index">
          {{name}}
        </el-radio-button>
      </el-radio-group>
    </p>
    <el-table border
              :data="allPlatform.data[allPlatform.selected]"
              show-summary
              :default-sort="sort"
              empty-text="还没有收集到昨天的数据">
      <el-table-column label="排名" prop="rank" width="100" sortable/>
      <el-table-column label="直播平台" prop="platform" width="120">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="right">
            <p>包含以下分类：</p>
            <p>{{scope.row.types.join(', ')}}</p>
            <div slot="reference">
              <el-tag size="medium">{{ scope.row.platform }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="*活跃主播数量" prop="num_active" sortable/>
      <el-table-column label="新增主播数量" prop="num_new" sortable/>
      <el-table-column label="开播数量" prop="num_open" sortable/>
      <el-table-column label="观看人气" prop="num_watch" sortable/>
      <el-table-column label="趋势" prop="trend" sortable/>
    </el-table>
  </el-card>
</template>

<script>
  export default {
    name: 'report_platform_data',
    props: {
      project: {required: true, default: {}},
      platformTypes: {required: true, default: null},
    },
    data() {
      return {
        sort: {prop: 'num_active', order: 'descending'},
        allPlatform: {selected: 0, keys: [], data: []},
      };
    },
    watch: {
      platformTypes(val) {
        this.allPlatform.keys = Object.keys(val);
        this.allPlatform.data = Object.values(val);
      },
    },
    mounted() {
      if (this.platformTypes) {
        this.allPlatform.keys = Object.keys(this.platformTypes);
        this.allPlatform.data = Object.values(this.platformTypes);
      }
    },
  };
</script>

<style scoped>

</style>